<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link href="${pageContext.request.contextPath }/js/fileupload/css/bootstrap.min.css" rel="stylesheet">  
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->  
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/fileupload/css/jquery.fileupload.css">  
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/fileupload/css/jquery.fileupload-ui.css">  
<script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>  
<script src="${pageContext.request.contextPath }/js/fileupload/vendor/jquery.ui.widget.js"></script>  
<script src="${pageContext.request.contextPath }/js/fileupload/js/jquery.fileupload.js"></script>  
<script src="${pageContext.request.contextPath }/js/fileupload/js/jquery.iframe-transport.js"></script>

</head>
<script type="text/javascript">

$(function() {  
    $("#weixin_image").fileupload({  
            url: '${pageContext.request.contextPath }/member/file/upload.do',  
            sequentialUploads: true  
        }).bind('fileuploadprogress', function (e, data) {  
            var progress = parseInt(data.loaded / data.total * 99, 10);  
            $("#weixin_progress").css('width',progress + '%');  
            $("#weixin_progress").html(progress + '%');  
        }).bind('fileuploaddone', function (e, data) {  
            $("#weixin_show").attr("src","__PUBLIC__/"+data.result);  
            $("#weixin_upload").css({display:"none"});  
            $("#weixin_cancle").css({display:""});  
        });
             
    }); 

</script>

<body>
	<div class="row fileupload-buttonbar" style="padding-left: 15px;">
		<div class="thumbnail col-sm-6">
			
			<div class="progress progress-striped active" role="progressbar"
				aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">
				<div id="weixin_progress" class="progress-bar progress-bar-success"
					style="width: 0%;"></div>
			</div>
			<div class="caption" align="center">
				<span id="weixin_upload" class="btn btn-primary fileinput-button">
					<span>上传</span> <input type="file" id="weixin_image"
					name="uploadFile" multiple>
				</span> <a id="weixin_cancle" href="javascript:void(0)"
					class="btn btn-warning" role="button"
					onclick="cancleUpload('weixin')" style="display: none">删除</a>
			</div>
		</div>
	</div>
</body>
</html>